<template>
	<view class="report">
		<!-- 标题 -->
		<view class="title">
			我要匿名举报
		</view>
		
		<!-- 1.插件:uview-ui 作者第二名 2.0版本 -->
		<!-- 2.进行相关配置 官方文档：https://uviewui.com -->
		<!-- <u-button text="提交"  type="primary"></u-button> -->
		<!-- <u-tag text="标签" plain size="mini" type="warning"></u-tag> -->
		
		<!-- 输入文本域 -->
		<!-- model 属性 数据源 -->
		<!-- rules 属性 校验规则 -->
		<!-- labelWidth 属性 提示文字前面的宽度 -->
		<u--form ref="form1" :model="formData" :rules="rules" labelWidth=0>
			<!-- 通过prop属性 指定当前表单元素 按照什么规则进行校验 prop="键名" -->
			<u-form-item prop="content">
				<u--textarea v-model="formData.content" placeholder="请输入举报内容" :count="true" maxlength=300>
					
				</u--textarea>
			</u-form-item>
		</u--form>
		
		<!-- 按钮 -->
		<u-button class="btn" text="提交"  type="primary" @click="submit"></u-button>
		
		<!-- 需求：1.对输入的内容进行校验（表单校验）：非空 长度3-300 2.点击提交按钮 通过表单校验 才发送请求提交举报 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					content:"",
					userId:0
				},
				// 校验规则
				rules:{
					// content是一个字符串
					'content':[
						// 一个对象就是一个校验规则
						// 1.校验非空 失去焦点 内容改变
						{
							type: 'string',
							required: true,
							message: '请填写举报内容',
							trigger: ['blur',]
						},
						// 2.校验长度
						{
							type: 'string',
							min:3,
							max:300,
							message: '内容长度在3~300',
							trigger: ['blur', 'change']
						}

					]
				}
			}
		},
		onLoad() {
			// 把本地设备里存的id取出来赋值给formData 的userId
			this.formData.userId=uni.getStorageSync('id')
		},
		methods: {
			//1.表单提交的方法 需求：点击提交按钮 通过表单校验 才发送请求提交举报
			submit(){
				// 想要拿到某个标签的dom结点{VueComponent } 1.form表单（对应标签）添加ref属性=xx 2.this.$refs.xx
			this.$refs.form1.validate().then(res => {
				// uni.$u.toast('校验通过')
				// 校验通过 发请求  header res.data.code===20000 三个等号不仅判断内容还要判断类型
				uni.request({
					url:"http://blog.coldworld.top:8081/report/add",
					method:"POST",
					data:this.formData,
					success: (res) => {
						// console.log(res)
						if(res.data.code===20000){
						// 提示用户举报成功
						uni.$u.toast('举报成功')
						// 拿到form表单dom结点 重置表单
						this.$refs.form1.resetFields()
						}else{
							let msg =res.data.message
							uni.$u.toast(msg)
						}
					}
				})
			}).catch(errors => {
				uni.$u.toast('请规范填写内容')
			})						
			},
			
		}
	}
</script>

<style lang="scss">
.report{
	padding: 20rpx;
	.title{
		font-size: 40rpx;
		font-weight: bold;
		
	}
	.btn{
		margin-top: 30rpx;
		// width: 100%;
	}
}

</style>
